<template>
  <div class="containerbox">
    <el-card style="height: 99%">
      <el-row>
        <div class="listtitle">
          <i></i>
          <div class="txt">基本信息</div>
        </div>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-position="right" label-width="120px">
            <el-form-item label="文章标题：" prop="artTitle" class="label-title">
              <el-input v-model="addForm.artTitle" placeholder="请输入文章标题" />
            </el-form-item>
            <el-row>
              <el-col :span="6">
                <el-form-item label="数据来源：" prop="artSource">
                  <el-select v-model="addForm.artSource" placeholder="请选择" clearable>
                    <el-option v-for="item in type" :key="item.dictCode" :label="item.dictLabel"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="来源渠道：" prop="siteName">
                  <el-input v-model="addForm.siteName" placeholder="请输入来源平台名称" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="来源截图：" prop="sourcePrintscreen">
              <div class="add-pic-container" @click="dealPic">
                <i class="el-icon-plus" v-if="sourcePrintscreen.length === 0"></i>
                <div class="img-container" v-else>
                  <img :src="sourcePrintscreen[0]" alt="" class="sourcePrintscreen-img">
                  <div class="add-number-container">+{{ sourcePrintscreen.length }}</div>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="原文链接：" prop="artUrl">
              <el-input v-model="addForm.artUrl" placeholder="请输入文章的原文链接" />
            </el-form-item>
            <el-form-item label="发布时间：" prop="artPublishTime">
              <el-date-picker v-model="addForm.artPublishTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择发布时间" clearable style="width: 50%" />
            </el-form-item>
            <el-form-item label="上报单位：" prop="parentId" v-if="isSuportDept">
              <el-cascader ref="cascaderAddr" placeholder="请选择上报单位" :options="deptOptions" :props="defaultProps"
                change-on-select filterable :show-all-levels="false" clearable v-model="addForm.parentId"
                style="width: 50%" />
            </el-form-item>

            <el-form-item label="文章内容：" prop="artContent" class="maxheight">
              <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 1000 }" placeholder="请输入内容"
                v-model="addForm.artContent" />
            </el-form-item>

            <el-form-item label="备注：" prop="remark" class="maxheight">
              <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 1000 }" placeholder="请输入内容"
                v-model="addForm.remark" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-col :span="2" :offset="5">
          <el-button :disabled="isDisable" @click="submit(1)">保存草稿</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" :disabled="isDisable" v-if="addForm.submitType == 1 || addForm.orderStatus == 1"
            @click="submit(2)">提交</el-button>
          <el-button type="primary" :disabled="isDisable" v-else @click="submit(3)">上报</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="cancel">取消</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="resetForm">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <div class="img-list-container" v-if="showImgList">
      <div class="icon-container" @click=" currentImgIndex > 0 && currentImgIndex--">
        <i class="el-icon-arrow-left"></i>
      </div>

      <div class="img-img-container">
        <img :src="sourcePrintscreen[currentImgIndex]" alt="">
      </div>

      <div class="icon-container" @click=" currentImgIndex < sourcePrintscreen.length - 1 && currentImgIndex++">
        <i class="el-icon-arrow-right"></i>
      </div>

      <div class="action-bar">
        <div> {{ currentImgIndex + 1 }} / {{ sourcePrintscreen.length }}</div>
        <el-button size="small" @click="triggerAddPic">新增</el-button>
        <el-button size="small" @click="doDeletePic">删除本张</el-button>
        <el-button size="small" @click="currentImgIndex = 0; showImgList = false">退出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reportDeptTree } from "@/api/opinion/data";
import { uploadFile } from "@/api/opinion/data";
import { saveCommit, getdraftdetail } from "@/api/opinion/data";
export default {
  data() {
    return {
      isDisable: false,
      editFlag: true,
      addForm: {
        orderId: "",
        artTitle: "",
        artSource: "",
        siteName: "",
        artUrl: "",
        artPublishTime: "",
        parentId: "",
        artContent: "",
        saveType: null,
        submitType: 0, // 0-上报 1-新增
        sourcePrintscreen: ""
      },
      //   部门来源
      deptOptions: [],
      isSuportDept: false,
      // 多选单位规则
      defaultProps: {
        children: "children",
        label: "label",
        value: "id",
        multiple: false,
        emitPath: false,
        disabled: "virtualShow",
        expandTrigger: "hover",
      },
      // 来源字典
      type: [],
      addFormRules: {
        artTitle: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
        ],
        artSource: [
          { required: true, message: "请选择数据来源", trigger: "blur" },
        ],
        siteName: [
          { required: true, message: "请输入来源平台名称", trigger: "blur" },
        ],
        artUrl: [
          { required: true, message: "请输入原文链接", trigger: "blur" },
        ],
        artPublishTime: [
          { required: true, message: "请选择发布时间", trigger: "blur" },
        ],
        parentId: [
          { required: true, message: "请选择上报单位", trigger: "blur" },
        ],
        artContent: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      showImgList: false,
      currentImgIndex: 0,
    };
  },
  computed: {
    sourcePrintscreen() {
      return (this.addForm.sourcePrintscreen || '').split(",").filter(Boolean) || []
    }
  },
  created() {
    let path = this.$route.path;
    this.isSuportDept = path.endsWith(0);
    if (path.endsWith(0) && this.isSuportDept) this.getTreeselect();

    this.getSubmitType();
    this.getType();
    setTimeout(() => {
      this.getDraftDetail();
    }, 100);
  },
  methods: {
    // 查询部门树
    getTreeselect() {
      reportDeptTree().then((res) => {
        this.deptOptions = res.data;
      });
    },

    getSubmitType() {
      var path = this.$route.path;
      if (path.indexOf("add") != -1) {
        var i = path.lastIndexOf("/") + 1;
        this.addForm.submitType = path.substr(i);
      }
    },

    getType() {
      this.getDicts("opinion_source").then((response) => {
        this.type = response.data;
      });
    },
    // 初始化草稿信息
    getDraftDetail() {
      var orderId = this.$route.params.orderId;
      if (orderId != undefined) {
        getdraftdetail(this.$route.params.orderId).then((res) => {
          if (res.code == 200) {
            this.addForm = {
              orderId: res.data.orderId,
              artTitle: res.data.artTitle,
              artSource: res.data.artSource + "",
              siteName: res.data.siteName,
              artUrl: res.data.artUrl,
              artPublishTime: res.data.artPublishTime,
              artContent: res.data.artContent,
              saveType: null,
              orderStatus: res.data.orderStatus,
              submitType: res.data.orderStatus,
            };
            this.editFlag = false;
          }
        });
      }
    },
    resetForm() {
      this.$refs["addForm"].resetFields();
    },
    // 提交成功跳转到待处理
    submit(saveType) {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.isDisable = true;
          var tips = "";
          var url = "/wait";
          this.addForm.saveType = saveType;
          if (saveType == 1) {
            tips = "保存草稿";
            url = "/draft";
          } else if (saveType == 2) {
            tips = "提交";
          } else if (saveType == 3) {
            tips = "确认上报";
          }
          saveCommit(this.addForm)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success(tips + "成功");
                this.$router.push(url);
              }
            })
            .catch(() => {
              this.isDisable = false;
              this.$message.error(tips + "失败");
            });
        }
      });
    },
    // 取消重定向到首页
    cancel() {
      if (this.editFlag) {
        this.$router.push("/index");
      } else {
        this.$router.push("/draft");
      }
    },

    dealPic() {
      if (this.sourcePrintscreen.length === 0) {
        this.triggerAddPic();
      } else {
        this.showImgList = true;
      }
    },

    triggerAddPic() {
      const input = document.createElement("input");
      input.type = 'file';
      input.accept = "image/*"
      input.addEventListener("change", () => {
        const file = input.files[0]
        const data = new FormData();
        data.append("file", file)
        uploadFile(data).then(res => {
          if (res.code == 200) {
            const url = res.data[0].fileUrl;
            this.addForm.sourcePrintscreen = [...this.sourcePrintscreen, url].join(",")
            if (this.showImgList) {
              this.currentImgIndex = this.sourcePrintscreen.length - 1;
            }
          } else {
            this.$message.error("上传文件失败")
          }
        }).catch(e => {
          this.$message.error("上传文件失败")
        })
      })

      input.click();
      input.remove();
    },

    doDeletePic() {
      this.addForm.sourcePrintscreen = this.sourcePrintscreen.filter((d, i) => i !== this.currentImgIndex).join(',');
      if (this.currentImgIndex >= this.sourcePrintscreen.length) {
        this.currentImgIndex = this.sourcePrintscreen.length - 1;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.containerbox {
  min-height: 85vh;
  background-color: rgb(240, 242, 245);
  padding: 15px;
}

.label-title {
  font-weight: 400;
  color: #294874;
}

.listtitle {
  margin-top: 15px;
  margin-bottom: 20px;

  .txt {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
  }

  i {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #2d8cf0;
    vertical-align: middle;
    margin-right: 15px;
    margin-left: 15px;
  }
}

.el-card {
  border-radius: 0px !important;
  border: none !important;
}

.el-card.is-always-shadow {
  box-shadow: none !important;
}


.add-pic-container {
  width: 120px;
  height: 120px;
  border: 1px dashed skyblue;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;

  .img-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    .add-number-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
    }
  }

  .sourcePrintscreen-img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
  }
}


.img-list-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: white;
  padding-bottom: 60px;
  padding-top: 20px;
  gap: 20px;

  .img-img-container {
    flex: 1;
    height: 100%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
    }
  }

  .icon-container {
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 40px;
    font-weight: 600;
  }

  .action-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }
}
</style>
<style lang="scss">
.el-form-item__label {
  color: #294874;
  font-weight: 500;
}

.maxheight {
  .el-textarea__inner {
    max-height: 400px !important;
  }

  .el-textarea__inner::-webkit-scrollbar-track {
    background-color: rgba(241, 241, 241, 0.637);
  }

  /*定义滚动条高宽及背景*/
  .el-textarea__inner::-webkit-scrollbar {
    width: 4px;
    background-color: rgba(241, 241, 241, 0.637);
  }

  /*定义滚动条*/
  .el-textarea__inner::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.3);
    border-radius: 2px;
  }
}
</style>
